//Vue 组件,组件名只能用小写字母
Vue.component("damai",{
    //模板=>封装的网页内容
    template:`
<div>
    <div class="container header">
	
	
<div class="span5">
		<div class="logo">
			<a href="index.html">
				<img src="image/r___________renleipic_01/logo.png" alt="依依不舍"/>
			</a>
		</div>
	</div>
	<div class="span9">
<div class="headerAd">
	<img src="image/header.jpg" width="320" height="50" alt="正品保障" title="正品保障"/>
</div>	</div>
<div class="span10 last">
		<div class="topNav clearfix">
			<ul>
				
					<li v-if="myinfo" id="headerLogin" class="headerLogin" style="display: list-item;">
					{{myinfo.name}}|
					</li>
					<li v-if="myinfo" id="headerLogin" class="headerLogin" style="display: list-item;">
						<a href="olist.html">我的订单</a>|
					</li>
					<li v-if="myinfo" id="headerRegister" class="headerRegister" style="display: list-item;">
					    <a href="/user/logout">退出</a>|
				    </li>
				    <li v-if="!myinfo" id="headerRegister" class="headerRegister" style="display: list-item;">
					    <a href="reg.html">注册</a>|
				    </li>
				    <li v-if="!myinfo" id="headerRegister" class="headerRegister" style="display: list-item;">
					    <a href="login.html">登录</a>|
				    </li>
				
				
				
				
				<li id="headerUsername" class="headerUsername"></li>
				<li id="headerLogout" class="headerLogout">
					<a>[退出]</a>|
				</li>
						<li>
							<a>会员中心</a>
							|
						</li>
						<li>
							<a>购物指南</a>
							|
						</li>
						<li>
							<a>关于我们</a>
							
						</li>
			</ul>
		</div>
		<div class="cart">
			<a  href="cart.html">购物车</a>
		</div>
			<div class="phone">
			\t客服热线:
				<strong>96008/53277764</strong>
			</div>
	</div>
	


<div class="span24">
		<ul class="mainNav">
					<li>
						<a href="index.html">首页</a>
						|
					</li>
					
					<li v-for="c in categories">
                        <a :href="'clist.html?cid='+c.cid+'&pageIndex='+c.cid">
                        	{{c.cname}}
                        </a>
					|</li>


		</ul>
	</div>


</div>
    <slot>内容插槽</slot>
    <div class="container footer">
	<div class="span24">
		<div class="footerAd">
					<img src="image/footer.jpg" width="950" height="52" alt="我们的优势" title="我们的优势">
</div>	</div>
	<div class="span24">
		<ul class="bottomNav">
					<li>
						<a>关于我们</a>
						|
					</li>
					<li>
						<a>联系我们</a>
						|
					</li>
					<li>
						<a>招贤纳士</a>
						|
					</li>
					<li>
						<a>法律声明</a>
						|
					</li>
					<li>
						<a>友情链接</a>
						|
					</li>
					<li>
						<a>支付方式</a>
						|
					</li>
					<li>
						<a>配送方式</a>
						|
					</li>
					<li>
						<a>服务声明</a>
						|
					</li>
					<li>
						<a>广告声明</a>
						
					</li>
		</ul>
	</div>
	<div class="span24">
		<div class="copyright">Copyright © 2005-2013 大麦商城 版权所有</div>
	</div>
</div>
</div> 
    `
    ,
    data(){
        return {
            categories:[],
            myinfo:null
        };
    },
    created(){
        axios.get("/category/queryAll").then(res=>{
            this.categories=res.data;
        });
        axios.get("/user/myinfo").then(res=>{
            if(res.data.code == 1){
                this.myinfo =res.data.data;
            }else{
                this.myinfo=null;
            }
        })

    }
});
Vue.component("category",{
    template: `
            <div class="span6">
				<div class="hotProductCategory">
					<dl v-for="c in categories">
						<dt>
							<a :href="'clist.html?cid=' + c.cid">{{c.cname}}</a>
						</dt>

						<dd v-for="cs in c.categoryseconds">
						    <a :href="'clist.html?csid=' + cs.csid">{{cs.csname}}</a>
						</dd>
					</dl>

				</div>
			</div>
    `,
    data(){
        return {
            categories:[]
        }
    },
    created() {
        axios.get("/category/queryAll").then(res=>{
            this.categories=res.data;
        });
    }
})
